
<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Test auth0-lock</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="//localhost:35729/livereload.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.auth0.com/styleguide/latest/index.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/index.css"/>
  </head>
  <!--[if IE 9]>
    <style>.sidebar-box ul a i{display: none}</style>
  <![endif]-->
  <body>
    <header class="site-header clearfix">
      <nav role="navigation" class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <h1 class="navbar-brand">
              <a href="/">
                <img src="//styleguide.auth0.com/img/auth0_logo.png"/>  
              </a>
            </h1>
          </div>
          <div class="navbar-right">
            <ul class="nav navbar-nav">
              <li class="li-docs">
                <a href="https://docs.auth0.com/login-widget2">Documentation</a>
              </li>
              <li class="li-button">
                <a href="https://app.auth0.com" target="_blank" class="signin-button btn btn-sm signup">
                  Open your dashboard</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>


    </header>

    <div class="container">
      <div class="sub-header sub-header-dropdown">
        <span class="sub-header-text">Auth0Lock example page</span>
        <ul class="external-links">
          <li>
            <a href="http://twitter.com/authzero" target="_blank">Twitter</a>
          </li>
          <li>
            <a href="http://github.com/auth0" target="_blank">Github</a>
          </li>
          <li>
            <a href="http://chat.auth0.com" target="_blank">Chat With Us</a>
          </li>
          <li>
            <a href="mailto:support@auth0.com" target="_blank">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <div class="sidebar-box"><strong>Lock</strong>
            <ul>
              <li><a href="https://docs.auth0.com/login-widget2"><i></i><span>Documentation</span></a></li>
            </ul>
          </div>
          <div class="sidebar-box">
            <strong>Basic examples</strong>
            <ul>
              <li><a id="show-button"><i></i>Full Login</a></li>
              <li><a id="login-button"><i></i>Login</a></li>
              <li><a id="signup-button"><i></i>Signup</a></li>
              <li><a id="reset-button"><i></i>Reset password</a></li>
              <li><a id="logout-button"><i></i>Logout</a></li>
            </ul>
            <hr />
            <strong>Advanced examples</strong>
            <ul>
              <li><a id="login-button-only-socials"><i></i>Login (only socials)</a></li>
              <li><a id="login-button-copyrighted"><i></i>Login (free suscription)</a></li>
              <li><a id="login-button-only-emailpass"><i></i>Login (only email/pass)</a></li>
              <li><a id="login-button-only-userpass"><i></i>Login (only user/pass)</a></li>
              <li><a id="login-button-only-enterprise"><i></i>Login (only enterprise)</a></li>

              <li><a id="login-button-popup-token"><i></i>Login Popup (Default token no options)</a></li>
              <li><a id="login-button-popup"><i></i>Login Popup</a></li>
              <li><a id="login-button-popup-only-socials"><i></i>Login Popup (only socials)</a></li>
              <li><a id="login-button-customicon"><i></i>Login (custom icon)</a></li>
              <li><a id="login-button-inside-container"><i></i>Login (inside a DIV)</a></li>
              <li><a id="login-button-all"><i></i>Login (all languages)</a></li>
              <li><a id="signup-button-footer-text"><i></i>Show SignUp (footer text)</a></li>
            </ul>
          </div>
        </div>
        <div class="col-sm-8">
          <div class="text-content">
            <h1>Lock</h1>

            <h4>Add this HTML line to your head</h4>
            <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;</pre>

            <h4>Add the script tag to your page to get started with Auth0 Login Lock.</h4>
            <pre>&lt;script src=&quot;https://cdn.auth0.com/w2/auth0-lock-3.0.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>User Info</h4>

            <div id="userinfo">
              <pre>Not logged in yet</pre>
            </div>

            <div class="clearfix">
              <div id="login-container1" style="float: left; width: 300px; height: 500px; margin-top: 20px;"></div>
              <div id="login-container2" style="float: left; width: 300px; height: 500px; margin-top: 20px;"></div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <script src="/auth0-lock.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script>
      $(function() {
          var credentials = {
            mdocs: {
              clientID: 'yKJO1ckwuY1X8gPEhTRfhJXyObfiLxih',
              domain: 'mdocs.auth0.com'
            },
            free: {
              clientID: 'zq4ImejULuvrPaazzFhttRgRUhCg4X3o',
              domain: 'auth0-demo.auth0.com'
            }
          }

          $('#show-button').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.show({
              callbackURL: window.location.href,
              responseType: 'token'
            });
          });

          $('#login-button').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token'
            });
          });

          $('#signup-button').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignup({
              callbackURL: window.location.href,
              responseType: 'token'
            });
          });

          $('#reset-button').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showReset({
              callbackURL: window.location.href,
              responseType: 'token'
            });
          });

          $('#logout-button').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.logout({
              returnTo: window.location.href
            });
          });

          $('#login-button-copyrighted').on('click', function() {
            var cid = credentials.free.clientID;
            var domain = credentials.free.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              socialBigButtons: true
            });
          });

          $('#login-button-only-socials').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              connections: ['facebook', 'google-oauth2', 'linkedin', 'twitter']
            });
          });

          $('#login-button-only-userpass').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              usernameStyle: 'username',
              connections: ['mdocs.io']
            });
          });

          $('#login-button-only-emailpass').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              connections: ['mdocs.io']
            });
          });

          $('#login-button-only-enterprise').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              connections: ['qraftlabs.com']
            });
          });

          $('#login-button-popup-token').on('click', function () {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin(function onlogin (err, profile) {
              if (err) {
                return $('#userinfo pre').text('Error: ' + err.message);
              }
              $('#userinfo pre').text(JSON.stringify(profile, 0, 2));
            });


          });


          $('#login-button-popup').on('click', function () {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              popup: true,
              popupOptions: { width: 300, heigth: 400, left: 200, top: 300 }
            }, onlogin);

            function onlogin (err, profile) {
              if (err) {
                return $('#userinfo pre').text('Error: ' + err.message);
              }
              $('#userinfo pre').text(JSON.stringify(profile, 0, 2));
            }
          });

          $('#login-button-popup-only-socials').on('click', function () {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              popup: true,
              connections: ['facebook', 'google-oauth2', 'linkedin', 'twitter']
            }, function (err, profile) {
              if (err) {
                $('#userinfo pre').text('Error: ' + err.message);
                return;
              }
              $('#userinfo pre').text(JSON.stringify(profile, 0, 2));
            });
          });

          $('#login-button-customicon').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignin({
              callbackURL: window.location.href,
              responseType: 'token',
              icon: '//utsa.edu/capri/img/Bank%20of%20america%20logo%202.png'
            });
          });

          $('#login-button-inside-container').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;

            var widget1 = new Auth0Lock(cid, domain);
            var widget2 = new Auth0Lock(cid, domain);

            trackEvents(widget1, 'widget1');
            trackEvents(widget2, 'widget2');

            widget1.showSignin({
              container: 'login-container1'
            });
            widget2.showSignin({
              container: 'login-container2',
              icon: '//auth0.com/boot/badge.png'
            });

          });

          $('#login-button-all').on('click', function() {
              var langs = ['ar', 'de', 'en', 'es', 'fr-FR', 'he', 'it', 'ja', 'nl-NL', 'pt', 'ru', 'zh'];
              var cid = credentials.mdocs.clientID;
              var domain = credentials.mdocs.domain;

              function next() {
                var l = langs.shift();
                if (!l) return;

                (new Auth0Lock(cid, domain))
                .on('ready', function() {
                  var self = this;
                  setTimeout(function() {
                    self.hide(next);
                  }, 3500);
                })
                .show({
                  callbackURL: window.location.href,
                  responseType: 'token',
                  dict: l,
                  rememberLastLogin: false
                });
              }

              next();
          });

          $('#signup-button-footer-text').on('click', function() {
            var cid = credentials.mdocs.clientID;
            var domain = credentials.mdocs.domain;
            var dict = {
              signup: {
                footerText: 'By signing up, you agree to our <a href="/terms" target="_new">Terms of service</a> and <a href="/privacy" target="_new">Privacy policy</a>'
              }
            };

            var widget = new Auth0Lock(cid, domain);

            trackEvents(widget);
            widget.showSignup({
              callbackURL: window.location.href,
              responseType: 'token',
              dict: dict
            });
          });

          var cid = credentials.mdocs.clientID;
          var domain = credentials.mdocs.domain;
          var widget = new Auth0Lock(cid, domain);
          var result = widget.parseHash(window.location.hash);

          var cid2 = credentials.free.clientID;
          var domain2 = credentials.free.domain;
          var widget2 = new Auth0Lock(cid2, domain2);
          var result2 = widget2.parseHash(window.location.hash);

          // Clean the hash after parse
          window.location.hash = "";

          if (result && result.id_token) {
            // After login, show user profile
            widget.getProfile(result.id_token, function(err, profile) {
              if (err) {
                return alert(err);
              }
              console.log(profile);
              $('#userinfo pre').text(JSON.stringify(profile, 0, 2));
            });

          } else if (result2 && result2.id_token) {
            // After login, show user profile
            widget.getProfile(result2.id_token, function(err, profile) {
              if (err) {
                return alert(err);
              }

              console.log(profile);
              $('#userinfo pre').text(JSON.stringify(profile, 0, 2));
            });

          } else if (result && result.error && /invalid_token/.test(result2.error)) {
            alert('error: ' + result.error);
          } else if (result2 && result2.error && /invalid_token/.test(result.error)) {
            alert('error: ' + result2.error);
          }

          function trackEvents(widget, namespace) {
            var name = namespace || 'widget';
            widget.on('shown', function() {
              console.log('%s shown', name);
            });
            widget.on('loading ready', function() {
              console.log('%s loading ready', name);
            });
            widget.on('ready', function() {
              console.log('%s ready', name);
            });
            widget.on('hidden', function() {
              console.log('%s hidden', name);
            });
            widget.on('signin ready', function() {
              console.log('%s signin ready', name);
            });
            widget.on('signin submit', function(options, context) {
              console.log('%s signin submit. context: %s', name, context.email);
            });
            widget.on('signup ready', function() {
              console.log('%s signup ready', name);
            });
            widget.on('reset ready', function() {
              console.log('%s reset ready', name);
            });
            widget.on('loggedin ready', function() {
              console.log('%s loggedin ready', name);
            });
            widget.on('kerberos ready', function() {
              console.log('%s loggedin ready', name);
            });
          }
      });

    </script>
  </body>
</html>
